<template>
  <div
    class="app_hbh"
    :style="{ backgroundColor: state.container.backgroundColor }"
  >
    <div class="test" :style="style">
      <EditorBlock
        v-for="(item, index) in state.blocks"
        :block="item"
        :allData="state"
        :isPre="true"
      ></EditorBlock>
    </div>
  </div>
  <ElDialog v-model="centerDialogVisible" title="表单所有参数" center>
    <span>{{ showFormOptions }}</span>
    <template #footer>
      <span class="dialog-footer">
        <ElButton @click="centerDialogVisible = false">取消</ElButton>
        <ElButton type="primary" @click="requestMock"> 请求模拟数据 </ElButton>
      </span>
    </template>
  </ElDialog>
</template>

<script setup>
import { ref, provide, onUnmounted, onMounted, computed } from "vue";
import deepcopy from "deepcopy";
import { events } from "@/packages/events";
import { useRoute } from "vue-router";
import { desDecrypt } from "./utils/crypto";
import { registerConfig as config } from "./utils/editor-config";
import EditorBlock from "./packages/editor-block";
import { getMockTable } from "@/common/api";
import {
  ElButton,
  ElInput,
  ElSelect,
  ElOption,
  ElDatePicker,
  ElCheckboxGroup,
  ElCheckbox,
  ElTable,
  ElTableColumn,
  ElPagination,
  ElTree,
  ElIcon,
  ElMessage,
  ElDialog,
} from "element-plus";
const route = useRoute();
const state = ref({});
provide("config", config); // 将组件的配置直接传到子子孙孙组件
onUnmounted(() => {
  events.off("switchDialog");
});
try {
  // 获取 URL 中的查询字符串
  let search = window.location.search;
  // 将查询字符串解析为 URLSearchParams 对象
  let urlParams = new URLSearchParams(search);
  let obj = urlParams.get("data");
  if (!obj) {
    ElMessage("传递参数不对！");
    state.value = {
      container: {},
      blocks: [],
    };
  } else {
    state.value = JSON.parse(decodeURIComponent(obj));
  }
} catch (error) {
  ElMessage("传递参数不对！");
  state.value = {
    container: {},
    blocks: [],
  };
}

const centerDialogVisible = ref(false);
const showFormOptions = ref("");
const style = computed(() => {
  return {
    width: state.value.container.width + "px",
    minWidth: state.value.container.minWidth + "px",
    minHeight: state.value.container.minHeight + "px",
    height: state.value.container.height + "px",
    backgroundColor: state.value.container.backgroundColor,
  };
});

events.on("switchDialog", (val) => {
  let findComponent = state.value.blocks.filter((item) =>
    ["input", "select", "checkbox", "datetime"].includes(item.key)
  );
  if (val) {
    let allOptions = {};
    findComponent.forEach((item) => {
      if (!(item.custom in allOptions)) {
        allOptions[item.custom] = deepcopy(item[item.custom]);
      }
    });
    // console.log(val,"首页监听事件总线");
    showFormOptions.value = allOptions;
    centerDialogVisible.value = true;
    return;
  }

  findComponent.forEach((item) => {
    if (item.key == "checkbox") {
      item[item.custom] = [];
    } else {
      item[item.custom] = "";
    }
  });
  let index = state.value.blocks.findIndex((item) => item.key == "table");
  if (index == -1) {
    return;
  }
  state.value.blocks[index].value = [];
  state.value.blocks[index].pagination.total = 0;
  ElMessage("所有参数及表格数据全部清空");
});
//请求假数据演示
const requestMock = () => {
  centerDialogVisible.value = false;
  let index = state.value.blocks.findIndex((item) => item.key == "table");
  if (index == -1) {
    return;
  }
  getMockTable(showFormOptions.value)
    .then((res) => {
      console.log(res.data);
      state.value.blocks[index].value = res.data;
      state.value.blocks[index].pagination.total = res.data.length;
      // console.log(state.value.blocks[index])
    })
    .catch((err) => {
      console.log(err);
      state.value.blocks[index].value = [];
      state.value.blocks[index].pagination.total = 0;
    });
};
</script>

<style lang="scss">
@import "@/assets/scss/editor";
</style>
